import { Toggle } from "../hooks/useToggle";
import Offset from "./Offset";
import PopoverBody from "./PopoverBody";
import PopoverOverlay from "./PopoverOverlay";
import Portal, { RenderContent, RenderTarget } from "./Portal";
import Position from "./Position";
import { FC, ReactElement, useRef } from "react";

interface PopoverProps {
  closeOnClickOutside: boolean;
  closeOnEscape: boolean;
  content: RenderContent;
  offset: Offset;
  position: Position;
  target: RenderTarget;
}

const Popover: FC<PopoverProps> = ({
  closeOnClickOutside,
  closeOnEscape,
  content,
  offset,
  position,
  target,
}) => {
  const targetRef = useRef<HTMLDivElement>(null);

  const renderTarget = (toggle: Toggle, opened: boolean): ReactElement => (
    <div ref={targetRef}>{target(toggle, opened)}</div>
  );

  const renderContent = (toggle: Toggle): ReactElement => (
    <>
      <PopoverOverlay closeOnEscape={closeOnEscape} onClose={toggle} />
      <PopoverBody
        closeOnClickOutside={closeOnClickOutside}
        offset={offset}
        position={position}
        targetRef={targetRef}
        onClose={toggle}
      >
        {content(toggle)}
      </PopoverBody>
    </>
  );

  return <Portal content={renderContent} target={renderTarget} />;
};

export default Popover;
